
//计算每个包着图片和文字的div的margin-left
var marginLeft = parseInt($(".img_syn div").css("margin-left"));
//计算每个包着图片和文字的div的margin-right
var marginRight = parseInt($(".img_syn div").css("margin-right"));
//计算包着所有图片的div的每次移动的距离
var moveDisWSyn = $(".img_syn>img").width() + marginLeft + marginRight;
//获取所有包着图片和文字的div
var images = $(".show_img_wrap>div");
//定义一个图片下方解释的文字
var wordArray = ['别名"脑洞系"，为了美和疯而活，负责把美的，不一样的，好玩儿的东西分享给大家。','经过定期培训喝疯咖咖啡师培训认证，认真快速的制作每一杯咖啡，为我们的味蕾负责。','什么，30分钟送达？不！我们的目标是瞬移过去！','没钱也要谋发展，招人不但靠一张嘴，最靠谱的后勤部门，没有之一！','	长期研发更丰富的咖啡品类有趣 的食品，视觉嗅觉味觉的三重合体，只有想不到，没有做不到。'];
var titleArray = ["好看部","好喝部","好快部","好穷部","好玩部"];
//定义图片的下标值
var index = 2;

//先定义一个图片为其加class，显示出来
$(images).eq(index).removeClass().addClass("new_style").siblings().removeClass().addClass("img_syn");


var changePos = - ((index * moveDisWSyn) - ($(".show_wrap").width() / 2) + 200);
$(".show_img_wrap").css("left",changePos);

// 浏览器窗口大小改变
window.onresize = function(){
	var changeNewPos = - ((index * moveDisWSyn) - ($(".show_wrap").width() / 2)+ 200);
	$(".show_img_wrap").css("left",changeNewPos);
};





//向左按钮的点击事件
$(".left_btn").on("click",function(){
	index --;
	if (index < 0) {
		index = 4;
	}
	//设置动画scale增大时的基准点
	$(".img_syn").css("-webkit-transform-origin","left top");
	$(images).eq(index).removeClass().css("margin","0% 7.3% 0% 0%").addClass("new_style").siblings().css("margin","9% 1% 0").removeClass().addClass("img_syn");
	$(".show_img_wrap").animate({
		//包着所有图片的div的left值
		left : - index * moveDisWSyn + 200
	});
	
	$(".bottom_word p").text(wordArray[index]);
	$(".bottom_word span").text(titleArray[index]);
})

$(".right_btn").on("click",function(){
	index ++;
	if (index > 4) {
		index = 0;
	}
	$(".img_syn").css("-webkit-transform-origin","right top");
	$(".new_style").css("margin","0 0 0 7.3%");
	$(images).eq(index).removeClass().css("margin","0 0 0 7.3%").addClass("new_style").siblings().css("margin","9% 1% 0").removeClass().addClass("img_syn");
	$(images).eq(index).removeClass().addClass("new_style").siblings().removeClass().addClass("img_syn");
	$(".show_img_wrap").animate({
		left : - index * moveDisWSyn + 200
	})
	$(".bottom_word p").text(wordArray[index]);
	$(".bottom_word span").text(titleArray[index]);
})

